﻿@{
    Layout = null;
}
@model xEasyApp.Web.Models.IndexModel
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>xjPlugin demo </title>
     @Html.Css("main", "layout", "tree", "tabpanel", "dailog")
     <style type="text/css">
        .icon_home
        {            
            background-image:url("@Url.Content("~/images/icons/home.png")");
        }
    </style> 
</head>
<body>
    <div class="main-panel">
        <div id="top" class="top">
           <span class="logotitle">@Model.LogoTitle</span>
           <span class="welcome">欢迎您，@Model.UserFullName&nbsp;&nbsp;&nbsp;<a href="@Url.Action("Logout")" class='normal'><span class='logout'>注销</span></a></span>
        </div>
        <div id="left" class="left" style="width:175px;top:38px;left:0px;">
            <div id="panel-header" class="x-panel-header" >
              
                 <span class="menupanel">
                    菜单
                 </span>
            </div>
            <div class="x-panel-bwrap">
                <div id="panel-wrap" class="x-panel-body">                    
                    <div id="treepanel" class="menutree">
                    <!--menu tree -->
                    </div>
                </div>
            </div>
        </div>
        <div id="tab-container" class="x-tab-panel x-border-panel" style="left:180px;top:38px;">
        </div>
        <div id="panel-bottom"></div>
    </div>
    @Html.Js("jquery","common","tree","tabpanel","dailog","easydrag")
    <script src="@Url.Action("Menu")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var mainh = document.documentElement.clientHeight;
            var mainw = document.documentElement.clientWidth;
            var panelheader = $("#panel-header").outerHeight();
            var header = 38;
            var bottom = 3;

            var op = { data: menudata, onnodeclick: navi };
            $("#treepanel").treeview(op);
            var tabo = {};
            tabo.items = [{ id: "home", text: "主页", classes: "icon_home", isactive: true, content: "<div style='padding:10px;'>欢迎光临!</div>"}];
            tabo.width = mainw - 180;
            tabo.height = mainh - header - bottom;
            $("#tab-container").tabpanel(tabo);
            function navi(item) {
                if (item.value) {
                    $("#tab-container").opentabitem({ id: idreplace(item.id), text: item.text, url: item.value, isactive: true, closeable: true }, true);
                }
                else {
                    item.expand();
                }
            }
            function idreplace(id) {
                return id.replace(/[^a-zA-Z\d_]/ig, "_")
            }
            setpanelsize();
            function setpanelsize() {
                mainh = document.documentElement.clientHeight;
                mainw = document.documentElement.clientWidth;
                var h = mainh - header - panelheader - bottom;
                var w = mainw - 180;
                $("#panel-wrap").height(h);
                $("#tab-container").width(w);
            }
            $(window).resize(window_resize);
            function window_resize() {
                setpanelsize();
                $("#tab-container").resizetabpanel(mainw - 180, mainh - header - bottom);
            }
        }); 
    </script>
</body>
</html>
